<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../js/vue.js"></script>
  <script src="../js/dayjs.min.js"></script>
  <title>过滤器</title>
</head>

<body>
  <!-- 
    过滤器:
      定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑处理)
      语法:
        1.注册过滤器:Vue.filter(name,callback)或new Vue{filters:{}}
        2.使用过滤器:{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
      备注:
        1.过滤器也可以接收额外参数,多个过滤器也可以串联
        2.并没有改变原本数据,是产生新的对应的数据
   -->
  <div id="root">
    <h2>当前时间戳:{{date}}</h2>
    <!-- 计算属性实现 -->
    <h2>现在是:{{fmtDate}}</h2>
    <!-- methods实现 -->
    <h2>现在是:{{getFmtDate()}}</h2>
    <!-- 过滤器实现 -->
    <h2>现在是:{{date | dateForMater}}</h2>
    <!-- 过滤器传参 -->
    <h2>现在是:{{date | dateForMater('YYYY-MM-DD')}}</h2>
    <h2>现在是:{{date | dateForMater('YYYY-MM-DD') | mySlice}}</h2>
    <h3 :x="msg | mySlice">{{msg.toUpperCase()}}</h3>
  </div>

  <div id="root2">
    <h2>{{msg | mySlice}}</h2>
  </div>
  <script>
    Vue.config.productionTip = false
    // 全局过滤器
    Vue.filter('mySlice',function (value) {
      return value.slice(0,4)
    })

    // 创建Vue实例
    new Vue({
      el: '#root',
      data() {
        return {
          date: Date.now(),
          msg:'guangdong'
        }
      },
      computed: {
        fmtDate() {
          return dayjs(this.date).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      methods: {
        getFmtDate() {
          return dayjs(this.date).format('YYYY年MM月DD日 HH:mm:ss')
        }
      },
      // 局部过滤器,只作用于该Vue实例
      filters: {
        // 如果str有值则用传进来的格式,没有则用默认str='YYYY-MM-DD HH:mm:ss'
        dateForMater(value, str = 'YYYY-MM-DD HH:mm:ss') {
          return dayjs(value).format(str)
        },
        // mySlice(value) {
        //   return value.slice(0, 4)
        // }
      },

    })

    new Vue({
      el:'#root2',
      data() {
        return {
          msg:'欢迎来到深圳!'
        }
      },
    })
  </script>
</body>

</html>